本篇的內容包含

• 如何製作Vue元件

今天接續Day03的內容，繼續完成基本的版型配置。

目錄的整理

首先來做一下檔案的整理：
在views下新增一個main的資料夾，
把App.vue移到裡面，並重新命名為index.vue
並且在views\main下新增style.scss及template.html檔案：

改好之後會像上圖這樣
接下來要把原本App.vue裡面的內容，重新拆分在這三個檔案中：

• index.vue：存放Script，並且引入其他兩個檔案
• style.scss：存放SCSS
• template.html：存放template的HTML

分開之後，可以避免產生過長的單一檔案，程式碼看起來也比較乾淨。當需要修改其中一個部分的時候，只要開啟相對應的檔案專注處理即可。

• 切分之後的index.vue：

<script>
export default {
  name: "app"
};
</script>
<!-- 引入template.html,style.scss  -->
<template src="./template.html"></template>
<style lang="scss" src="./style.scss" scoped></style>

• 切分之後的style.scss：

.header {
  background-color: #0fb0ef;
}
.content {
  height:calc(100vh - 50px);
  .aside {
    width: 200px;
  }
  .main {
    background-color: #e8e5e5;
  }
}

• 切分之後的template.html：

<div id="app">
    <el-container>
        <el-header class="header">我是header</el-header>
        <el-container class="content">
            <el-aside class="aside">Aside</el-aside>
            <el-main class="main">Main</el-main>
        </el-container>
    </el-container>
</div>

因為更改了原本App.vue的配置，所以main.js也要跟著修改。
將原本引入App元件的語法改為以下：

import App from "./views/main/index.vue";

這樣就完成資料夾的整理。

加入全域共用的core.scss，_variables.scss

除了每個元件/頁面自己的CSS樣式之外，專案裡也會有一些全域共通的樣式，

加入所需檔案

在/src/assets下新增一個scss的目錄，並在裡面新增以下兩個檔案：

• core.scss：全域共通的樣式
• _variables.scss：存放專案共用的SCSS變數，檔名加底線表示不會自動編譯
  _variables.scss的內容，加入思源黑體的GoogleFont字型，套用至所有div：

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:300,400,500&display=swap');
div, *{
    font-family: 'Noto Sans TC', sans-serif;
}

_variables.scss的內容，存放基本的顏色變數：

$color-main:#0fb0ef;
$color-light:#ffffff;
$color-gray:#e8e5e5;

在main.js引用

建置好檔案之後，還需要在main.js加入引用才會生效。

import "./assets/scss/core.scss";

建置網站header區塊

修改views/main/template.html，將header加入以下元素：

• 展開/縮放Menu的按鈕(click事件：switchMenu)
• 網站的標題
• 後台登入者的頭像(使用Element UI Avatar元件，需要在main.js import)

<el-header class="header">
    <i class="el-icon-s-operation switch-menu-button" @click="switchMenu"></i>
    <span>LINE後台管理系統</span>
    <el-avatar :size="38"></el-avatar>
</el-header>

main.js加入Avatar元件的參考：

import {
 /*(省略其他元件)*/
  Avatar
} from "element-ui";
Vue.use(Avatar);

修改views/main/style.scss，加入header的樣式。顏色的部分，會使用到_variables.scss的內容，因此要加入引用_variables.scss的語法。

@import "../../assets/scss/_variables";
.header {
    background-color: $color-main;
    height: 50px !important;
    display:flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    color: $color-light;
    letter-spacing: 1.2px;
    font-weight: 500;
  }
  /* 因為header的高度從預設的60px改為50px,
     所以原本.content的calc(100vh - 50px)高度也要跟著更改 */
  .content {
    height: calc(100vh - 50px);
  }

這樣Header就完成了！

建置網站Menu區塊

製作一個Menu元件

在src/components/下新增一個menu的資料夾，裡面一樣加入以下的檔案：

在

接下來我們要完成標題列的內容
包含：菜單的打開/收合切換按鈕
顯示會員資訊的區塊
通知狀態列
菜單的部分，寫成一個簡單的元件，綁定Icon跟Text
在App.Vue加入以下程式碼：

          <el-menu
            default-active="1-4-1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            :collapse="true"
          >
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span slot="title">导航二</span>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">导航二</span>
            </el-menu-item>
            <el-menu-item index="3" disabled>
              <i class="el-icon-document"></i>
              <span slot="title">导航三</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </el-menu-item>
          </el-menu>